<template>
  <el-container>
    <el-header>
      <div class="header-div">
        <img src="@/assets/logo.png" alt="" />
        <span><router-link to="/">乐鑫数智</router-link></span>
        <!-- <el-button type="info" style="float: right" @click="logout">登录</el-button> -->
      </div>
    </el-header>

    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <!-- <div class="toggle-btn" @click="openCollapse">|||</div> -->
        <el-menu :default-active="activePath" background-color="#FFEFE5" text-color="#D36F2F"
          active-text-color="#FB5A0A" router class="el-menu-vertical-demo" :collapse="isCollapse"
          :collapse-transition="false" @select="menuSelect">
          <el-submenu :index="'/' + item.path" v-for="item in menuData" :key="item.id">
            <template #title>
              <!-- <i class="el-icon-location"></i> -->
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item v-for="subItem in item.children" :key="subItem.id" :index="'/' + subItem.path">{{
        subItem.title
      }}</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang='js'>
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import router from '../router/router.js'
const diyrouter = [{
  "id": "1",
  "title": "网站概况",
  "path": "/goods/goods-list",
  "children": [{
    "id": "3",
    "title": "网站概况",
    "path": "goods/goods-list"
  }],
},
{
  "id": "2",
  "title": "趋势分析",
  "path": "/goods",
  "children": [{
    "id": "3",
    "title": "实时访客",
    "path": "goods/goods-list"
  },
  {
    "id": "4",
    "title": "今日统计",
    "path": "goods/goods-info"
  }
  ]
},
{
  "id": "5",
  "title": "来源分析",
  "path": "/user",
  "children": [{
    "id": "6",
    "title": "全部来源",
    "path": "user/user-list"
  },
  {
    "id": "7",
    "title": "搜索引擎",
    "path": "user/user-setting"
  },
  {
    "id": "8",
    "title": "关键词",
    "path": "user/user-setting"
  },
  {
    "id": "9",
    "title": "外部链接",
    "path": "user/user-setting"
  }
  ]
},
{
  "id": "10",
  "title": "页面分析",
  "path": "/user",
  "children": [{
    "id": "11",
    "title": "受访页面",
    "path": "user/user-list"
  },
  {
    "id": "12",
    "title": "受访域名",
    "path": "user/user-setting"
  },
  {
    "id": "13",
    "title": "入口页面",
    "path": "user/user-setting"
  },
  {
    "id": "14",
    "title": "页面点击图",
    "path": "user/user-setting"
  },
  {
    "id": "15",
    "title": "页面上下游",
    "path": "user/user-setting"
  }
  ]
},
{
  "id": "16",
  "title": "访客分析",
  "path": "/user",
  "children": [{
    "id": "17",
    "title": "地域分析",
    "path": "user/user-list"
  },
  {
    "id": "18",
    "title": "系统环境",
    "path": "user/user-setting"
  },
  {
    "id": "19",
    "title": "新老访客",
    "path": "user/user-setting"
  },
  {
    "id": "20",
    "title": "访客属性",
    "path": "user/user-setting"
  }
  ]
},
]
export default defineComponent({
  name: "~Layout",
  setup(props, { emit, slots }) {
    const state = reactive({
      menuData: Object(diyrouter),
      isCollapse: false,
      activePath: '',
      openCollapse() {
        this.isCollapse = !this.isCollapse;
      },
      logout() {
        window.sessionStorage.clear();
        router.push('/login');
      },
      menuSelect(index, indexPath, item, routeResult) {
        state.activePath = index;
        sessionStorage.setItem("routerPath", index);
      }
    });

    onMounted(() => {
      console.log();
      state.activePath = sessionStorage.getItem("routerPath") || "";
    });

    return {
      ...toRefs(state)
    };
  }
});
</script>

<style lang='css' scoped>

.el-container {
  height: 1000px;
}

.el-header {

  background: linear-gradient(to right, #FAFAFA 0%, #FACDAC 100%);

  color: #fff;
  font-size: 20px;
}

a {
  text-decoration: none;
  color: #DF5A0F;

  cursor: pointer;
}

.el-aside {
  background-color: #FFEFE5;
  
}

/deep/ .el-submenu__title {
  font-weight: 700;
}

/* 自定义选中菜单项的背景色 */
.el-menu-item.is-active {
  background-color: #DF5A0F !important; /* 蓝色背景 */
  color: #fff !important; /* 白色文字 */
}

.toggle-btn {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}

.header-div img {
  width: 60px;
  height: 60px;
  vertical-align: middle;
  margin-right: 20px;
}

.el-main {
  background-color: #ECF3FB;
  padding-top: 0;
  /* margin-top: 20px; */
}
</style>
